<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        body,img,div{
            margin: 0;
            padding: 0;
        }
        .item-wrap{
            width: 800px;
            height: 600px;
            overflow: hidden;
            margin: 0 auto;
            display: flex;
            position: relative;
        }
        .item-wrap div{
            position: relative;
        }     
    </style>
    <script>
        "use strict";
        document.myReady(function(){
            var slideItemArr = document.getElementsByClassName('item-wrap')[0].children;
            var originHeight,originWidth,duration,speed,timeMove,timeOutMove;
            var originArr = [];
            var autoArr = [];
            // a b c d e  bcdea cdeab
            function init(){
                originHeight = 600;
                originWidth = 800;
                duration = 1000/50;
                speed = 20;
                for(let i = 0; i < slideItemArr.length; i++){
                    originArr.push(slideItemArr[i]);
                    slideItemArr[i].style.left = '0px';
                }
                autoArr = [originArr[0], originArr[1]]
            }
            function changeArr(origin, target){
                let temp = origin.slice(1,origin.length);
                temp.push(origin[0]);
                origin = temp;
                target.push(origin[0],origin[1]);
                return{
                    origin : origin,
                    target : target
                }
            }
            function move(index, after){
                index = autoArr[0];
                after = autoArr[1];

                index.style.left = `${ parseInt(index.style.left) - speed}px`;
                after.style.left = `${ parseInt(after.style.left) - speed}px`;
                if(parseInt(index.style.left) == -800){
                    clearTimeout(timeOutMove);
                    clearInterval(timeMove);
                    //清除样式
                    index.style.left = '0px';
                    after.style.left = '0px';
                    //重置autoArr
                    autoArr = [];
                    //变化autoArr
                    let temp = changeArr(originArr,autoArr);
                    autoArr = temp.target;
                    originArr = temp.origin;
                    //更新dom
                    for(let i = 0; i < slideItemArr.length; i++){
                        document.getElementsByClassName('item-wrap')[0].removeChild(slideItemArr[i]);
                        for(let j = 0; j < originArr.length; j++){                            
                            document.getElementsByClassName('item-wrap')[0].appendChild(originArr[j]);
                        }             
                    }
                }
            }
            function autoMove(){
                timeMove = setInterval(move, duration);
                timeOutMove = setTimeout(autoMove,1000);                
            }
            function movePause(){
                clearTimeout(timeOutMove);
                clearInterval(timeMove);
                timeMove = setInterval(move, duration);
            }
            init();
            (function(){
                document.getElementsByClassName('move-auto')[0].onclick = autoMove;
                document.getElementsByClassName('move-pause')[0].onclick = movePause;
            }(window))
        });
    </script>
</head>
<body>
    <div class="slide-wrap">
        <div class="item-wrap">
            <div class="slide-item1"><img src="../images/pic1.jpg" alt=""></div>
            <div class="slide-item2"><img src="../images/pic2.jpg" alt=""></div>
            <div class="slide-item3"><img src="../images/pic3.jpg" alt=""></div>
            <div class="slide-item4"><img src="../images/pic4.jpg" alt=""></div>
            <div class="slide-item5"><img src="../images/pic5.jpg" alt=""></div>
        </div>
        <div class="control-wrap">
            <button class="move-auto">move-auto</button>
            <button class="move-pause">move-pause</button>
            <button class="move-to-index"></button>
        </div>
    </div>
</body>
</html>